<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        TIP
        CSS 属性 clip-path:polygon() 用于将一个元素裁剪成一个多边形

        clip-path: polygon(x1 y1, x2 y2, ......., xn yn);
    -->

    <style>
        .layout {
          width: 200px;
          height: 200px;
          background-color: tomato;
        }
        .triangle {
          /* 裁剪三角形 */
          clip-path: polygon(100px 0, 200px 200px, 0 200px);
        }
        .rhombus {
          /* 裁剪菱形 */
          clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 50%);
        }
      </style>
      
      <div class="layout triangle"></div>
      <div class="layout rhombus"></div>
</body>
</html>